<!--
 * @Description: 退店管理列表
 * @Author: liyujie
 * @Date: 2021/02/07
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/02/18
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    退店详情
                    <span
                        class="header-tips"
                        v-if="formData.step === 6"
                    >
                        已签收退店协议，记得上传回执单哦～
                    </span>
                </div>
            </div>
            <!-- /header -->
            <div class="step-wrapper">
                <el-steps
                    :active="step"
                    align-center
                    finish-status="success"
                >
                    <el-step
                        :title="formData.verify | verifyFilter"
                        :status="formData.verify === -1 || formData.verify === -2 || formData.verify === -3 ? 'error' : ''"
                        v-if="step === 0"
                    />
                    <el-step
                        title="平台审核"
                        v-else
                    />
                    <el-step title="店铺公示"/>
                    <el-step title="上传电子协议"/>
                    <el-step title="商家回寄协议"/>
                    <el-step title="确认收到协议"/>
                    <el-step title="上传回执单"/>
                </el-steps>
            </div>
            <div
                class="count-down-wrapper"
                v-if="formData.step === 1"
            >
                <div class="count-down-title">店铺公示倒计时</div>
                <div class="count-down-view">
                    还剩
                    <span>{{ countDown.day }}</span>天
                    <span>{{ countDown.hour }}</span>时
                    <span>{{ countDown.minute }}</span>分
                    <span>{{ countDown.second }}</span>秒
                </div>
            </div>
            <div class="form-wrapper">
                <div class="form-title">
                    商家信息
                </div>
                <el-form
                    class="base-info shop"
                    inline
                >
                    <el-form-item
                        label="企业名称："
                    >
                        {{ formData.company_name }}
                    </el-form-item>
                    <el-form-item
                        label="店铺名称："
                    >
                        {{ formData.shop_title }}
                    </el-form-item>
                    <el-form-item
                        label="法定联系人："
                    >
                        {{ formData.contact_name ? formData.contact_name : '--' }}
                    </el-form-item>
                    <el-form-item
                        label="增值服务费用："
                    >
                        {{ formData.vas_money }}
                    </el-form-item>
                    <el-form-item
                        label="保证金金额："
                    >
                        {{ formData.deposit_money }}
                    </el-form-item>
                    <el-form-item
                        label="入驻时间："
                    >
                        {{ formData.hire_create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </el-form-item>
                    <el-form-item
                        label="退店类型："
                    >
                        {{ formData.type | typeFilter }}
                    </el-form-item>
                </el-form>
                <div class="form-title">
                    合同信息
                </div>
                <el-form class="base-info">
                    <el-form-item label="商家入驻合同：">
                        <div
                            v-for="(item, index) in formData.settle_contract"
                            :key="index"
                            style="margin-left: 110px"
                        >
                            <el-link
                                class="contract"
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="margin-right: 20px"
                            >
                                《掌上大学入驻合同》
                            </el-link>
                            <el-link
                                class="el-button el-button--primary el-button--mini"
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="color: #fff"
                            >
                                点击查看协议
                            </el-link>
                        </div>
                    </el-form-item>
                </el-form>
                <div class="form-title">
                    商家退店原因
                </div>
                <el-form class="base-info">
                    <el-form-item label="退店主要原因：">
                        <div v-if="formData.reason_type && formData.reason_type.length">
                            <span
                                v-for="(item, index) in formData.reason_type"
                                :key="index"
                                style="margin-right: 12px"
                            >
                                {{ item | reasonFilter }}
                            </span>
                        </div>
                        <div v-else>--</div>
                    </el-form-item>
                    <el-form-item style="margin-left: 110px;width: 500px">
                        {{ formData.reason_other }}
                    </el-form-item>
                </el-form>
                <div class="form-title">
                    销售人员信息
                </div>
                <el-form
                    class="base-info"
                    v-if="formData.sales_leads_admin"
                >
                    <el-form-item label="姓名：">
                        {{ formData.sales_leads_admin.true_name }}
                    </el-form-item>
                    <el-form-item label="掌大账号：">
                        {{ formData.sales_leads_admin.username }}
                    </el-form-item>
                    <el-form-item label="手机号：">
                        {{ formData.sales_leads_admin.phone }}
                    </el-form-item>
                </el-form>
                <div
                    class="form-title"
                    v-if="formData.step > 1"
                >
                    上传电子协议和收件地址
                </div>
                <el-form
                    class="base-info contract"
                    :model="contractForm"
                    :rules="rules"
                    ref="contractForm"
                    label-position="right"
                    label-width="110px"
                    v-if="formData.step > 1"
                >
                    <el-form-item
                        label="上传电子协议："
                        prop="fileList"
                        v-if="formData.step === 2"
                    >
                        <file-upload v-model="contractForm.fileList"/>
                    </el-form-item>
                    <el-form-item
                        label="退店电子协议："
                        v-if="formData.step !== 2"
                    >
                        <div
                            v-for="(item, index) in formData.close_contract"
                            :key="index"
                            style="display: flex; align-items: center"
                        >
                            <i
                                class="el-icon-link"
                                style="margin-right: 4px"
                            />
                            <el-link
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="margin-right: 20px; color: #1890FF;"
                            >
                                文件
                            </el-link>
                            <el-link
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="color: #1890FF;"
                            >
                                查看
                            </el-link>
                        </div>
                    </el-form-item>
                    <el-form-item label="上传收件地址：">
                        <div>
                            <el-form-item>
                                <div class="tips">该地址为掌大地址，用于商家回寄退店协议</div>
                            </el-form-item>
                            <el-form-item
                                label="联系人："
                                prop="receive_user_name"
                                label-width="82px"
                            >
                                <el-input
                                    v-model="contractForm.receive_user_name"
                                    size="medium"
                                    clearable
                                    style="width: 430px"
                                    :disabled="formData.step !== 2"
                                />
                            </el-form-item>
                            <el-form-item
                                label="手机号："
                                prop="receive_user_phone"
                                label-width="82px"
                            >
                                <el-input
                                    v-model="contractForm.receive_user_phone"
                                    size="medium"
                                    clearable
                                    style="width: 430px"
                                    :disabled="formData.step !== 2"
                                />
                            </el-form-item>
                            <el-form-item
                                label="收件地址："
                                prop="receive_user_address"
                                label-width="82px"
                            >
                                <el-input
                                    v-model="contractForm.receive_user_address"
                                    size="medium"
                                    clearable
                                    style="width: 430px"
                                    :disabled="formData.step !== 2"
                                />
                            </el-form-item>
                        </div>
                    </el-form-item>
                </el-form>
                <div
                    class="form-title"
                    v-if="formData.step === 4"
                >
                    商家拒绝电子协议
                </div>
                <el-form
                    class="base-info"
                    label-width="110px"
                    v-if="formData.step === 4"
                >
                    <el-form-item
                        label="商家拒绝原因："
                        style="width: 500px;"
                    >
                        {{ formData.close_contract_fail_reason }}
                    </el-form-item>
                    <el-form-item label="拒绝说明文件：">
                        <div
                            v-for="(item, index) in formData.close_contract_suggest"
                            :key="index"
                            style="display: flex; align-items: center"
                        >
                            <i
                                class="el-icon-link"
                                style="margin-right: 4px"
                            />
                            <el-link
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="margin-right: 20px; color: #1890FF;"
                            >
                                电子协议
                            </el-link>
                            <el-link
                                class="el-button el-button--primary el-button--mini"
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="color: #fff"
                            >
                                查看附件
                            </el-link>
                        </div>
                    </el-form-item>
                </el-form>
                <div
                    class="form-title"
                    v-if="formData.step > 4"
                >
                    商家同意电子协议
                </div>
                <el-form
                    class="base-info"
                    v-if="formData.step > 4"
                >
                    <el-form-item>
                        <div style="font-size: 14px;font-weight: 400;color: #FF6E00;">
                            商家已同意退店协议，等待商家将协议寄回
                        </div>
                    </el-form-item>
                </el-form>
                <div
                    class="form-title"
                    v-if="formData.step > 4"
                >
                    物流信息<span class="form-title-tips">商家已经将协议寄回注意查收物流信息</span>
                </div>
                <el-form
                    class="base-info"
                    v-if="formData.step > 4"
                >
                    <logistics-info
                        :list="formData.close_contract_receive_tracking_info_list"
                        :logistics="{
                            logistics_name: formData.close_contract_receive_logistics_name,
                            tracking_no: formData.close_contract_receive_tracking_no
                        }"
                    />
                </el-form>

                <div
                    class="form-title"
                    v-if="formData.step > 5"
                >
                    上传回执单
                </div>
                <el-form
                    class="base-info contract"
                    :model="refundForm"
                    :rules="rules"
                    ref="refundForm"
                    label-position="right"
                    label-width="110px"
                    v-if="formData.step > 5"
                >
                    <el-form-item label="企业名称：">
                        <el-input
                            v-model="formData.company_name"
                            size="medium"
                            clearable
                            style="width: 430px"
                            disabled
                        />
                    </el-form-item>
                    <!--<el-form-item
                        label="退款金额："
                        prop="refund_money"
                    >
                        <el-input
                            v-model="refundForm.refund_money"
                            size="medium"
                            clearable
                            style="width: 430px"
                            :disabled="formData.step !== 6"
                        >
                            <span
                                slot="suffix"
                                style="margin-right: 5px"
                            >
                                元
                            </span>
                        </el-input>
                    </el-form-item>-->
                    <el-form-item
                        label="上传回执单："
                        prop="fileList"
                        v-if="formData.step === 6"
                    >
                        <file-upload
                            v-model="refundForm.fileList"
                            accept=".jpg,.jpeg,.png,.GIF,.JPG,.PNG"
                        />
                    </el-form-item>
                    <el-form-item
                        label="回执单："
                        v-if="formData.step !== 6"
                    >
                        <div
                            v-for="(item, index) in formData.refund_return_receipt"
                            :key="index"
                            style="display: flex; align-items: center"
                        >
                            <i
                                class="el-icon-link"
                                style="margin-right: 4px"
                            />
                            <el-link
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="margin-right: 20px; color: #1890FF;"
                            >
                                回执单
                            </el-link>
                            <el-link
                                :underline="false"
                                :href="item"
                                target="_blank"
                                style="color: #1890FF;"
                            >
                                查看
                            </el-link>
                        </div>
                    </el-form-item>
                </el-form>
            </div>

            <!-- button -->
            <div class="footer">
                <el-button
                    size="medium"
                    type="default"
                    :style="{width: '120px', margin: '0 32px 52px 80px'}"
                    @click="handleRoute('ReturnShopList')"
                >
                    返回
                </el-button>
                <el-button
                    size="medium"
                    type="default"
                    :style="{width: '120px', margin: '0 32px 52px 0'}"
                    v-if="formData.verify === 1 && formData.step === 0"
                    @click="showVerifyDialog(-1)"
                >
                    拒绝
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px', margin: '0 32px 52px 0'}"
                    v-if="formData.verify === 1 && formData.step === 0"
                    @click="showVerifyDialog(1)"
                >
                    通过
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px', margin: '0 32px 52px 0'}"
                    v-if="formData.step === 2"
                    @click="submitContract"
                >
                    提交
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px', margin: '0 32px 52px 0'}"
                    v-if="formData.step === 3 || formData.step === 4"
                    @click="$refs.uploadContract.show(apply_no, {
                        receive_user_name: formData.close_contract_receive_address_info.user_name,
                        receive_user_phone: formData.close_contract_receive_address_info.phone,
                        receive_user_address: formData.close_contract_receive_address_info.address,
                    })"
                >
                    重新上传协议
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px', margin: '0 32px 52px 0'}"
                    v-if="formData.step === 5"
                    @click="handleSignFor(apply_no)"
                >
                    确认签收
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px', margin: '0 32px 52px 0'}"
                    v-if="formData.step === 6"
                    @click="submitRefund"
                >
                    提交回执单
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{minWidth: '120px', margin: '0 32px 52px 0'}"
                    v-if="formData.step === 7"
                    @click="$refs.uploadRefund.show(apply_no, formData.company_name)"
                >
                    重新上传回执单
                </el-button>
            </div>
        </div>

        <!--上传协议弹窗-->
        <upload-contract
            ref="uploadContract"
            @update="getData"
        />
        <!--上传回执单弹窗-->
        <upload-refund
            ref="uploadRefund"
            @update="getData"
        />

        <!-- 拒绝弹窗 -->
        <reject-dialog
            ref="rejectDialog"
            :visible.sync="rejectDialog"
            placeholder="请输入拒绝原因"
            :maxlength="100"
            @confirm="handleVerify(apply_no, -1, $event)"
        />
        <!-- /拒绝弹窗 -->
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import FileUpload from "@/components/shop-manage/file-upload";
import LogisticsInfo from "@/components/shop-manage/logistics-info";
import UploadContract from "@/components/shop-manage/upload-contract";
import UploadRefund from "@/components/shop-manage/upload-refund";
import RejectDialog from "@/components/dialog/reject-dialog";
import { saveAs } from 'file-saver';

export default {
    name: 'ReturnShopDetail',
    mixins: [back],
    components: {
        RejectDialog,
        UploadRefund,
        UploadContract,
        LogisticsInfo,
        FileUpload
    },
    data() {
        return {
            step: 0,
            // 申请编号
            apply_no: '',
            rejectDialog: false,
            // 详情信息
            formData: {},
            // 电子协议表单
            contractForm: {
                // 协议文件列表
                fileList: [],
                close_contract: '',
                // 收件人信息
                receive_user_name: '',
                receive_user_phone: '',
                receive_user_address: '',
            },
            // 回执单表单
            refundForm: {
                // 回执单文件
                fileList: [],
                // 回执单链接
                refund_return_receipt: '',
                // 退款金额
                refund_money: ''
            },
            rules: {
                fileList: [
                    {required: true, message: '请上传协议', trigger: 'change'}
                ],
                receive_user_name: [
                    {required: true, message: '请填写收件人姓名', trigger: 'blur'}
                ],
                receive_user_phone: [
                    {required: true, message: '请填写收件人手机号', trigger: 'blur'}
                ],
                receive_user_address: [
                    {required: true, message: '请填写收件地址', trigger: 'blur'}
                ],
                refund_money: [
                    {required: true, message: '请填写退款金额', trigger: 'blur'}
                ]
            },
            // 倒计时
            countDown: {
                day: '00',
                hour: '00',
                minute: '00',
                second: '00',
            },
            // 清除倒计时用
            timer: null,
            authResult: {}
        };
    },
    computed: {},
    mounted() {
        this.init();
    },
    beforeDestroy() {
        clearTimeout(this.timer);
    },

    filters: {
        verifyFilter(type) {
            switch (type) {
                case -1:
                    return '已拒绝';
                case -2:
                    return '已终止';
                case -3:
                    return '已撤销';
                default:
                    return '平台审核';
            }
        },
        typeFilter(type) {
            switch (type) {
                case 1:
                    return '平台清退';
                case 2:
                    return '合同到期';
                case 3:
                    return '提前解除';
                default:
                    return '--';
            }
        },
        reasonFilter(val) {
            switch (val) {
                case 1:
                    return '业务模式不匹配';
                case 2:
                    return '公司业务有调整';
                case 4:
                    return '与招商经理描述有出入';
                case 8:
                    return '掌大服务能力待提升';
                case 16:
                    return '平台授权到期';
                default:
                    return '--';
            }
        }
    },

    methods: {
        /**
         * 初始化
         */
        init() {
            this.$store.commit('SET_HEADER', [
                {title: "APP后台"}, {title: '商城'}, {title: '店铺管理'},
                {title: '退店管理', path: '/student/return-shop-list'}, {title: '退店详情'}
            ]);
            this.authResult = this.$route.meta.authResult;
            this.apply_no = this.$route.query.no;
            this.getData();
        },

        /**
         * 获取详情数据
         */
        getData() {
            let params = {
                apply_no: this.apply_no
            };

            this.$post('/student/shop_close_apply%5Cget_info', params, resp => {
                if (resp.code === 1) {
                    this.formData = resp.data;
                    this.step = resp.data.step;
                    if (resp.data.step === 3 || resp.data.step === 4) {
                        this.step = 3;
                    }
                    if (resp.data.step > 4) {
                        this.step = resp.data.step - 1;
                    }

                    if (resp.data.close_contract_receive_address_info) {
                        this.contractForm.receive_user_name = resp.data.close_contract_receive_address_info.user_name;
                        this.contractForm.receive_user_phone = resp.data.close_contract_receive_address_info.phone;
                        this.contractForm.receive_user_address = resp.data.close_contract_receive_address_info.address;
                    }
                    this.refundForm.refund_money = resp.data.refund_money;
                    this.countDownTime(resp.data.shop_close_time * 1000);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * 倒计时
         * @param endTime
         */
        countDownTime(endTime) {
            // 补零
            const repair = num => {
                if (num < 10) return '0' + num;
                return num;
            };
            // 获取当前时间
            let now = Number(this.$moment().format('x'));
            // 时间差
            let leftTime = endTime - now;

            if (leftTime >= 0) {
                // 天
                let day = repair(Math.floor(leftTime / 1000 / 60 / 60 / 24));
                // 时
                let hour = repair(Math.floor(leftTime / 1000 / 60 / 60 % 24));
                // 分
                let minute = repair(Math.floor(leftTime / 1000 / 60 % 60));
                // 秒
                let second = repair(Math.floor(leftTime / 1000 % 60));

                this.countDown = {day, hour, minute, second};
            } else {
                this.countDown = {
                    day: '00',
                    hour: '00',
                    minute: '00',
                    second: '00',
                };
            }
            // 等于0的时候不调用
            if (Number(this.countDown.day) === 0 && Number(this.countDown.hour) === 0 && Number(this.countDown.minute) === 0 && Number(this.countDown.second) === 0) {
                clearTimeout(this.timer);
            } else {
                // 递归每秒调用countDownTime方法，显示动态时间效果,
                this.timer = setTimeout(() => {
                    this.countDownTime(endTime);
                }, 1000);
            }
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 提交退店协议
         */
        submitContract() {
            this.$refs.contractForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let urls = this.contractForm.fileList.map(item => {
                        return item.url;
                    });
                    let params = {
                        apply_no: this.apply_no,
                        close_contract: urls.join(),
                        receive_user_name: this.contractForm.receive_user_name,
                        receive_user_phone: this.contractForm.receive_user_phone,
                        receive_user_address: this.contractForm.receive_user_address
                    };

                    this.$post('/student/shop_close_apply%5Cset_close_contract', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getData();
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });
                }
            });
        },

        /**
         * 提交回执单
         */
        submitRefund() {
            this.$refs.refundForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let urls = this.refundForm.fileList.map(item => {
                        return item.url;
                    });
                    let params = {
                        apply_no: this.apply_no,
                        refund_return_receipt: urls.join(),
                        refund_money: this.refundForm.refund_money
                    };

                    this.$post('/student/shop_close_apply%5Cset_refund', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.getData();
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });
                }
            });
        },

        /**
         * 签收协议
         * @param no
         */
        handleSignFor(no) {
            this.$confirm('签收后该状态不可变更，确认是否签收?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    apply_no: no
                };

                this.$post('/student/shop_close_apply%5Csign_close_contract', params, resp => {
                    if (resp.code === 1) {
                        this.$notify({
                            title: '提示',
                            message: '签收成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.getData();
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 显示审核操作弹窗
         * @param action -1拒绝 1 通过
         */
        showVerifyDialog(action) {
            // 通过
            if (action === 1) {
                this.$confirm('确认通过该退店申请?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleVerify(this.apply_no, action);
                });
            } else {
                this.$refs.rejectDialog.title = '拒绝申请';
                this.rejectDialog = true;
            }
        },

        /**
         * 审核操作
         * @param apply_no
         * @param verify
         * @param verify_fail_reason
         */
        handleVerify(apply_no, verify, verify_fail_reason) {
            let params = {
                apply_no,
                verify,
                verify_fail_reason
            };

            this.$post('/student/shop_close_apply%5Cverify', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.getData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 获取文件名
         * @param url
         * @returns {string}
         */
        getFileName(url) {
            return url.substring(url.lastIndexOf('/') + 1);
        },

        /**
         * 下载文件
         * @param url
         */
        downloadFile(url) {
            saveAs(url, this.getFileName(url));
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 12px;
        padding: 24px;
        background: #fff;
        box-sizing: border-box;
        overflow: auto;

        /*header*/

        .header {
            height: 44px;
            box-sizing: border-box;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            border-bottom: 1px solid #F0F2F5;

            .header-title {
                color: #333333;
                font-size: 20px;
                height: 20px;
                font-weight: 500;
                position: relative;
            }

            .header-tips {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FF6E00;
                margin-left: 24px;
            }
        }

        // 步骤条
        .step-wrapper {
            margin: 24px 0;

            /deep/ .el-steps {
                .el-step__line {
                    width: 75%;
                    left: 62%;
                    background: #E9E9E9;
                }

                .el-step__icon {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border: 1px solid;
                    text-align: center;

                    .el-step__icon-inner {
                        font-size: 10px;
                        color: #333333;
                        font-family: SFCompactDisplay-Medium, SFCompactDisplay;
                        font-weight: 500;
                    }
                }

                .el-step__title {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #88909C;
                }

                .is-process {
                    color: #1890FF;
                    border-color: #1890FF;

                    .el-step__icon {
                        background: #1890FF;
                    }

                    .el-step__icon-inner {
                        color: #fff;
                    }
                }

                .is-success {
                    color: #1890FF;
                    border-color: #1890FF;

                    .el-step__icon {
                        background: #1890FF;
                    }

                    .el-step__icon-inner {
                        color: #fff;
                    }

                    .el-step__line {
                        background: #1890FF;
                    }
                }

                .is-error {
                    color: #F56C6C;
                    border-color: #F56C6C;

                    .el-step__icon {
                        background: #F56C6C;
                    }

                    .el-step__icon-inner {
                        color: #fff;
                    }
                }
            }
        }

        // 倒计时
        .count-down-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 150px;
            background: #FFF7F2;
            border-radius: 4px;
            border: 1px solid #FFD6BD;
            margin-bottom: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;

            .count-down-title {
                font-size: 20px;
                color: #000000;
            }

            .count-down-view {
                font-size: 16px;
                color: #333333;
                margin-top: 24px;

                span {
                    font-size: 24px;
                    font-family: SFProDisplay-Medium, SFProDisplay;
                    color: #FF6E00;
                    margin: 0 8px;
                }
            }
        }

        // 表单
        .form-wrapper {
            background: #FBFBFB;
            border: 1px solid #EEEEEE;
            padding: 20px 32px;

            .form-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                border-bottom: 1px solid #E9E9E9;
                padding: 12px 0;
                margin: 20px 0;

                .form-title-tips {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    margin-left: 12px;
                }
            }

            .base-info {
                padding-left: 32px;

                &.shop {
                    /deep/ .el-form-item {
                        width: 30%;
                    }
                }

                /deep/ .el-form-item {
                    margin-right: 0;
                    margin-bottom: 4px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-size: 14px;
                    font-weight: 400;

                    .el-form-item__label {
                        color: #888;
                    }

                    .el-form-item__content {
                        color: #333;
                    }
                }

                // 合同
                .contract {
                    color: #1890FF;
                    text-decoration: underline;
                    cursor: pointer;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                }

                &.contract {
                    /deep/ .el-form-item {
                        margin-bottom: 22px;

                        .el-form-item__label {
                            color: #333;
                        }
                    }
                }

                .tips {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }

        .footer {
            display: flex;
            align-items: center;
            margin-top: 33px;
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }
}
</style>
